<template>
	<view>
		<fa-navbar :title="title"></fa-navbar>
		<scroll-view class="pb-6" scroll-y="true" v-if="dataList.length > 0">
			<u-gap height="40" bg-color="#F6F8FB"></u-gap>
			<view>
				<view class="pr-1 pl-1">
					<view v-for="(item, idx) in dataList" :key="idx" @click="toReadMessage(item)">
						<view class="flex-between-center pt-min pb-min">
							<view class="u-line-1 h4-font-light-gray">{{item.CreateTimeStr}}</view>
							<view class="red-dot">
								<view class="red-dot-item">
									<u-badge v-if="item.IsRead === 0" :is-dot="true" type="error" :offset="[-10, -10]" size="mini"></u-badge>
								</view>
							</view>
						</view>
						<u-gap height="4" bg-color="#F6F8FB"></u-gap>
						<view class="h4-font-dim-gray mt-m2 mb-m2">{{item.Content}}</view>
					</view>
				</view>
				<u-gap height="4" bg-color="#F6F8FB"></u-gap>
			</view>
			<u-loadmore v-if="showLoadmore" :status="loadStatus" margin-top="20" @loadmore="getNotificationListByPage" />
		</scroll-view>
		<view class="flex-column-center" v-if="noData">
			<image class="mt-188" width="292rpx" height="292rpx" src="../../static/images/none-message.svg"></image>
			<view class="h3-font-light-gray mt-1">还没有消息哦</view>
		</view>
	</view>
</template>

<script>
	import SOtime from '@/js_sdk/fl-SOtime/SOtime.js'
	export default {
		components: {
			SOtime
		},
		data() {
			return {
				noData: false,
				dataList: [],
				userid: undefined,
				twoWeekIndex: undefined,
				loadStatus: 'loading',
				showLoadmore: true,
				total: null,
				form: {
					Type:null,
					PageIndex: 1,
					PageSize: 15
				},
				formCount: {
					AddCount: 0,
					AlarmCount: 0,
					CheckCount: 0,
					HandleCount: 0,
					TotalCount: 0
				}
			};
		},
		onShow() {
			this.form.PageIndex = 1;
			this.getNotificationListByPage();
		},
        onLoad(options) {
			this.form.Type= options.Type;
			if (options.Type === 'FASG_NOTIFY_TYPE0001') {
				this.title = "资产录入";
			} else if (options.Type === 'FASG_NOTIFY_TYPE0003') {
				this.title = "资产处置";
			} else if (options.Type === 'FASG_NOTIFY_TYPE0004') {
				this.title = "资产盘点";
			} else if (options.Type === 'FASG_NOTIFY_TYPE0006')  {
				this.title = "报警";
			} else {
				this.title = "报警";
			}
		},
		onReachBottom() {
			// 分页加载
			this.loadStatus == 'nomore' ? null : this.getNotificationListByPage();

		},

		methods: {

			getNotificationListByPage() {
				this.$api.getNotificationListByPage(this.form)
					.then(res => {
						if (res.code == 0) {
							this.total = res.data.Total;
							if (res.data.Data) {
								res.data.Data.forEach(item => item.CreateTimeStr = SOtime.time6(item.CreateTime));
							}
							if (this.form.PageIndex > 1) {
								this.dataList.push(...res.data.Data)
							} else {
								this.dataList = res.data.Data
							}
							// 分页加载
							if (res.data.Page == res.data.TotalPage) {
								this.showLoadmore = false
								this.loadStatus = 'nomore'
							} else {
								this.loadStatus = 'loadmore'
							}
							if (this.dataList.length == 0) {
								this.showLoadmore = false;
								this.noData = true;
							}else {
								this.noData = false;
							}
							this.form.PageIndex = this.form.PageIndex + 1;
						} else {
							// 分页加载
							this.showLoadmore = false;
							this.loadStatus = 'nomore'
						}
					});
			},
			toReadMessage(item) {
				let params = {
					Guid: item.Guid,
					IsRead: 1
				}
				this.$api.setUpdateReadState(params).then( res => {
					if (item.Type == 'FASG_NOTIFY_TYPE0001') return
					if (item.Type == 'FASG_NOTIFY_TYPE0004002') return
					// 站内信 后端增加ObjectGuid，为统一使用公共函数，将赋值给Guid字段
					item.Guid = item.ObjectGuid;
					this.$store.dispatch('messageToPage', item)
					// uni.navigateTo({
					// 	url: '/pages/message/readMessage?guid='+item.Guid+"&type="+item.Type+"&content="+item.Content
					// })
				})
				.catch(err => console.error(err));
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.red-dot-circle {
		width: 10rpx;
		height: 10rpx;
		border-radius: 5rpx;
		background-color: #E55D5D;
	}
	
	.red-dot {
		display: flex;
	
		.red-dot-item {
			text-align: center;
			position: relative;
		}
	}
	
</style>
